<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>本地gojs测试</title>
    <script src="data/go.js"></script>
    <script src="data/data.js"></script>
    <script>
        let myDiagram = {}

        function init() {
            myDiagram = new go.Diagram('myDiagramDiv', diagramInit)
            myDiagram.nodeTemplate = getNode()
            myDiagram.model = new go.GraphLinksModel(nodeData, [])
        }

        function getNode() {
            let node = new go.Node(go.Panel.Auto, nodeInit1)
            node.bindTwoWay('location', 'location', go.Point.parse, go.Point.stringify)
            node.bindTwoWay('desiredSize', 'size', go.Size.parse, go.Size.stringify)

            let shape = new go.Shape('RoundedRectangle', {
                fill: 'white',
                stroke: 'black',
                strokeWidth: 1
            })
            shape.bind('fill', 'color')

            let text = new go.TextBlock({
                margin: 5
            })
            text.bind('text', 'name')

            node.add(shape, text)
            return node
        }

        function addNode() {
            myDiagram.startTransaction('add node')
            myDiagram.model.addNodeData({
                key: 1,
                name: 'test',
                color: 'red',
                location: '0 300',
                size: '100 60'
            })
            myDiagram.commitTransaction('add node')
        }

        window.addEventListener('DOMContentLoaded', init)
    </script>
    <style>
        .home-clazz {
            text-align: center;
        }

        #myDiagramDiv {
            width: 100vw;
            height: 60vh;
            background-color: #00fafa;
        }
    </style>
</head>
<body>
<div class="home-clazz">
    <h2>测试gojs</h2>
    <button onclick="addNode()">增加节点</button>
    <div id="myDiagramDiv">

    </div>
</div>
</body>
</html>